<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-empty class="empty"></pure-empty>
			</pj-demo>

			<!-- 自定义图标和提示 -->
			<pj-demo title="自定义图标和提示">
				<pure-empty
					class="empty"
					iconName="/static/images/i_e01.png"
					text="Ops，您还未添加任何商品，去逛逛吧"
				></pure-empty>
			</pj-demo>

			<!-- 默认插槽 -->
			<pj-demo title="默认插槽">
				<pure-empty
					class="empty"
					iconName="/static/images/i_e02.png"
					text="Ops，您还未添加任何商品，去逛逛吧"
				>
					<view class="footer">
						<pure-button
							text="回首页"
							theme="primary"
							link
						></pure-button>
						<pure-button
							text="逛一逛"
							theme="success"
							link
						></pure-button>
					</view>
				</pure-empty>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped>
	.empty {
		padding: 80px 20px;
		background: var(--pure-background-default);
		border-radius: var(--pure-radius-default);
		font-size: var(--pure-font-size-small);
	}

	.footer {
		display: flex;
		flex-direction: row;
		gap: 10px;
		margin-top: 10px;
	}
</style>
